<template>
  <div class="page">
     <div class="cover">
      <img class="play_mask" src="../../assets/img/music/play_mask.png" alt="">
      <img class="cover_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384" alt="">
    </div>
    <p class="music_name">为你生成音乐潜力之外</p>
    <div class="flex_b_c flex_a_c pay">
      <span>需支付</span>
      ￥48.00
    </div>
    <div v-if="isPlay" class="tips">预计需要<span>12分钟34秒</span></div>
    <div v-if="!isPlay" class="btns flex_center" @click="onPay">立即支付</div>
  </div>
</template>
<script setup>
import { showToast } from 'vant'
import { ref } from "vue"
let isPlay = ref(false)
let onPay = () => {
  isPlay.value = true
  // const div = document.createElement('div');
  // div.innerHTML = data.orderinfo;
  // document.body.appendChild(div);
  // document.forms[0].setAttribute('target', '_self');
  // document.forms[0].submit();
  // div.remove();
  // callback(data)
  
  showToast('支付成功')
}
</script>
<style lang="scss" scoped>
.page {
  padding: 16px;
  min-height: 100vh;
  background: #161616;
  .cover {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    position: relative;
    .play_mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: -30px;
      animation: rotate 2s linear infinite;
      animation-play-state: running; /* 默认运行动画 */
      animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
      &.pause {
        animation-play-state: paused; /* 添加一个类来暂停动画 */
      }
    }
    .cover_img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px 8px 8px 8px;
      display: block;
    }
  }
  .music_name {
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 24px;
    line-height: 32px;
  }
  .pay {
    font-size: 20px;
    color: #FFFFFF;
    line-height: 28px;
    margin-top: 48px;
    span {
      font-size: 16px;
      color: #FFFFFF;
    }
  }
  .btns {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(20px + constant(safe-area-inset-bottom));
    bottom: calc(20px + env(safe-area-inset-bottom));
    height: 56px;
    background: #F5D290;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    line-height: 56px;
    font-size: 16px;
    color: #000000;
  }
  .tips {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 25px;
    text-align: center;
    span {
      color: rgba(255,255,255,0.6);
    }
  }
}
</style>